import React, { useEffect, useState } from 'react';
import "../styles/Register.scss"
import { Form, Input, Button, Select, notification } from 'antd'
import { role_list, staff_register } from "../utils/api"
import { useNavigate } from 'react-router-dom'

interface Props {

}


function Register(props: Props) {
    var navigate = useNavigate()

    //表单验证通过,执行
    const onFinish = (values: any) => {
        if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(values.phone) == false) {
            notification.error({ message: "请输入合法手机号！", placement: "top" })

        } else {
            //发起 注册请求
            staff_register(values).then((res) => {
                if (res.data.code == 200) {
                    notification.success({ message: '注册成功!', placement: "top" });
                    navigate('/login');//跳转登录页
                }
            })

        }

    };

    //角色列表,
    var [options, setOptions] = useState([])

    //引入生命周期
    useEffect(() => {
        role_list().then((res) => {
            var arr = res.data.list.map((item: any) => {
                return { label: item.name, value: item._id }

            })
            setOptions(arr)
        })
    })
    return (
        <div className='register'>
            <div className="form-box">
                <Form
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="账号"
                        name="user"
                        rules={[{ required: true, message: '输入账号' }]}
                    >
                        <Input placeholder='输入账号' />
                    </Form.Item>

                    <Form.Item
                        label="姓名"
                        name="name"
                        rules={[{ required: true, message: '输入姓名' }]}
                    >
                        <Input placeholder='输入姓名' />
                    </Form.Item>

                    <Form.Item
                        label="昵称"
                        name="nickname"
                        rules={[{ required: true, message: '输入昵称' }]}
                    >
                        <Input placeholder='输入昵称' />
                    </Form.Item>

                    <Form.Item
                        label="手机号"
                        name="phone"
                        rules={[{ required: true, message: '输入手机号' }]}
                    >
                        <Input placeholder='输入手机号' />
                    </Form.Item>

                    <Form.Item
                        label="角色"
                        name="role"
                        rules={[{ required: true, message: '选择角色' }]}
                    >
                        <Select
                            style={{ width: 120 }}
                            options={options}
                        />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">注册</Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}
export default Register;